<template>
  <div style="height:100%;">
     <!-- <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>
    <div v-transfer-dom>
      <actionsheet :menus="menus" v-model="showMenu" @on-click-menu="changeLocale"></actionsheet>
    </div> -->
    <drawer
    width="200px;"
    :show.sync="drawerVisibility"
    :drawer-style="{'background-color':'#ffffffed', width: '200px'}">
    <div slot="drawer">
        <group title="分类" style="margin-top:20px;">
          <cell title="分类一" link="/demo" value="第一个分类" @click.native="drawerVisibility = false">
          </cell>
          <cell title="Buy me a coffee" link="project/donate" @click.native="drawerVisibility = false">
          </cell>
          <cell title="Github" link="http://github.com/airyland/vux" value="Star me" @click.native="drawerVisibility = false">
          </cell>
        </group>
      </div>
    <view-box ref="viewBox" :body-padding-top="isShowNav ? '46px' : '0'"  body-padding-bottom="55px">
      <x-header
          v-if="isShowNav"
          slot="header"
          style="width:100%;position:absolute;left:0;top:0;z-index:100;background: linear-gradient(180deg, #e14118, #d75c0c,#b80f0ff0);"
          :title="title"
          :transition="headerTransition">
          <span slot="overwrite-left" @click="drawerVisibility = !drawerVisibility">
            <x-icon type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
          </span>
        </x-header>
         <keep-alive exclude="topicDetail">
            <router-view class="router-view"></router-view>
         </keep-alive>
      <div>
        <tabbar slot="bottom" v-show="this.path=='/list'">
          <tabbar-item link="/list" v-model="selectIndex">
            <img slot="icon" src="../assets/icon/home.png" >
            <img slot="icon-active" src="../assets/icon/home_selected.png" >
            <span slot="label">首页</span>
          </tabbar-item>
          <tabbar-item show-dot>
            <img slot="icon" src="../assets/icon/topic.png">
            <img slot="icon-active" src="../assets/icon/topic_selected.png" >
            <span slot="label">列表</span>
          </tabbar-item>
        </tabbar>
    </div>


    </view-box>
  
    </drawer>
  </div>
</template>

<script>
import { Radio, Group, Cell, Badge, Drawer, Actionsheet, ButtonTab, ButtonTabItem, ViewBox, XHeader, Tabbar, TabbarItem, Loading, TransferDom } from 'vux'
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  components: {
   Radio, Group, Cell, Badge, Drawer, Actionsheet, ButtonTab, ButtonTabItem, ViewBox, XHeader, Tabbar, TabbarItem, Loading, TransferDom
  },
  methods: {
    ...mapMutations('app',[
      "updateScrollTop"
    ])
  },
  mounted () {
    this.handler = () => {
      if (this.path === '/list'&&this.box) {
        this.updateScrollTop(this.box.scrollTop)
        
      }
    }
    if(this.path=="/"){
      this.$router.push({name:"list"});
    }
  },
  beforeDestroy () {
    this.box && this.box.removeEventListener('scroll', this.handler, false)
  },
  data () {
    return {
            drawerVisibility:false,
            componentName:"",
            selectIndex:1,
            box:null,
            handler:null
    }
  },
  computed: {
    ...mapState("app",{
        direction:state=>state.direction
    }),
    
    viewTransition () {
      if (!this.direction) return ''
      return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out')
    },
    headerTransition () {
      if (!this.direction) return ''
      return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
    },
    title(){
      return "";
    },
    path(){
      if (this.$route.path === '/list') {
            setTimeout(() => {
              this.box = document.querySelector('#topic-list')
              if (this.box) {
                this.box.removeEventListener('scroll', this.handler, false)
                this.box.addEventListener('scroll', this.handler, false)
                console.log("添加事件")
              }
            }, 200);
          } else {
            this.box && this.box.removeEventListener('scroll', this.handler, false)
      }
      return this.$route.path;
    },
    isShowNav(){
       if(this.path.indexOf("topicDetail")>=0){
          return false;
       }
       return true;
    }
  },
  watch: {
      path(){
        
      }
  },
}
</script>

<style>
  body {
  background-color: #fbf9fe;
}
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.demo-icon-22 {
  font-family: 'vux-demo';
  font-size: 22px;
  color: #888;
}
.weui-tabbar.vux-demo-tabbar {
  /** backdrop-filter: blur(10px);
  background-color: none;
  background: rgba(247, 247, 250, 0.5);**/
}
.vux-demo-tabbar .weui-bar__item_on .demo-icon-22 {
  color: #F70968;
}
.vux-demo-tabbar .weui-tabbar_item.weui-bar__item_on .vux-demo-tabbar-icon-home {
  color: rgb(53, 73, 94);
}
.demo-icon-22:before {
  content: attr(icon);
}
.vux-demo-tabbar-component {
  background-color: #F70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui-tabbar__icon + .weui-tabbar__label {
  margin-top: 0!important;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

@font-face {
  font-family: 'vux-demo';  /* project id 70323 */
  src: url('//at.alicdn.com/t/font_70323_wlronpvr565yiudi.eot');
  src: url('//at.alicdn.com/t/font_70323_wlronpvr565yiudi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_70323_wlronpvr565yiudi.woff') format('woff'),
  url('//at.alicdn.com/t/font_70323_wlronpvr565yiudi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_70323_wlronpvr565yiudi.svg#iconfont') format('svg');
}

.demo-icon {
  font-family: 'vux-demo';
  font-size: 20px;
  color: #04BE02;
}

.demo-icon-big {
  font-size: 28px;
}

.demo-icon:before {
  content: attr(icon);
}

.router-view {
  width: 100%;
  top: 46px;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}
</style>